<template>
    <el-card>
        <div style="margin-bottom: 20px">
            <el-button @click="addAction">添加</el-button>
        </div>
        <el-table :data="sourceData">
            <el-table-column label="分类名">
                <template #default="{ row }">
                    {{ row.title }}
                </template>
            </el-table-column>
            <el-table-column label="关联文章量">
                <template #default="{ row }">
                    {{ row.total }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        :icon="Edit"
                        text
                        @click="editAction(row)"
                        >编辑</el-button
                    >
                    <!-- <el-button type="primary" :icon="Share" /> -->
                    <ElPopconfirm
                        title="是否删除?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        icon-color="red"
                        @confirm="deleteAction(row.id)"
                    >
                        <template #reference>
                            <ElButton
                                :loading="deleteLoading[row.id] ?? false"
                                type="danger"
                                :icon="Delete"
                                text
                            >
                                删除
                            </ElButton>
                        </template>
                    </ElPopconfirm>
                </template>
            </el-table-column>
        </el-table>
        <INFO v-model:visible="modalVisible" v-bind="modalProps" />
    </el-card>
</template>
<script lang="ts" setup>
/* --------------------------------- DEFAULT -------------------------------- */
import { ref, watchEffect, reactive, nextTick } from "vue"
import { Delete, Edit } from "@element-plus/icons-vue"
import { ElButton, ElMessage, ElPopconfirm } from "element-plus"

/* ----------------------------------- API ---------------------------------- */
import { CateGetLists, CateDelete } from "@/api/articles"

/* ---------------------------------- TYPE ---------------------------------- */
import type { API } from "@/types/articles"

/* ----------------------------------- UI ----------------------------------- */
import INFO from "./components/Info.vue"

/* --------------------------------- Content -------------------------------- */
const sourceData = ref<API.CATE.Info[]>([])
const modalVisible = ref<boolean>(false)
const deleteLoading = reactive<boolean[]>([])
const modalProps = reactive<{
    id?: number
    title?: string
}>({})

watchEffect(async () => {
    const { data } = await CateGetLists()
    sourceData.value = data
})

/* -------------------------------- Content-Function -------------------------------- */
const editAction = async (row: API.CATE.Info): Promise<void> => {
    modalProps.title = row.title
    modalProps.id = row.id
    await nextTick()
    modalVisible.value = true
}

const addAction = async (): Promise<void> => {
    modalProps.title = undefined
    modalProps.id = undefined
    await nextTick()
    modalVisible.value = true
}

const deleteAction = async (id: number): Promise<void> => {
    deleteLoading[id] = true
    try {
        const { code, message } = await CateDelete()
        deleteLoading[id] = false
        sourceData.value = sourceData.value.filter((item) => !(item.id === id))
        ElMessage({
            type: code === 200 ? "success" : "warning",
            message,
        })
    } catch (error) {
        deleteLoading[id] = false
    }
}
</script>
